// Sass for videojs-qualityselector

.video-js {

    // This class is added to the video.js element by the plugin by default.
    &.vjs-qualityselector {
        display: block;
    }

    .vjs-quality-container {
        padding: 8px;
        position: relative;

        .vjs-brand-quality-link {
            color: #fff;
            text-decoration: none;
            cursor: pointer;
        }

        .vjs-quality-dropdown {
            position: absolute;
            bottom: 35px;
            left: 5px;
            background-color: rgba(43, 51, 63, 0.7);

            /** animation **/
            transition: opacity 0.5s linear;

            opacity: 0;

            -webkit-transform: scaleY(0);
            -o-transform: scaleY(0);
            -ms-transform: scaleY(0);
            transform: scaleY(0);

            -webkit-transform-origin: bottom;
            -o-transform-origin: bottom;
            -ms-transform-origin: bottom;
            transform-origin: bottom;

            -webkit-transition: -webkit-transform 0.26s ease-out;
            -o-transition: -o-transform 0.26s ease;
            -ms-transition: -ms-transform 0.26s ease;
            transition: transform 0.26s ease;
        }

        &:hover .vjs-quality-dropdown {
            opacity: 1;

            -webkit-transform: scaleY(1);
            -o-transform: scaleY(1);
            -ms-transform: scaleY(1);
            transform: scaleY(1);
        }

        .vjs-quality-dropdown ul {
            margin: 0;
            padding: 0;
        }

        .vjs-quality-dropdown ul li {
            list-style: none;
            margin: 0;

            a {
                color: #fff;
                text-decoration: none;
                padding: 5px 10px;
                display: table;
                width: 100%;
            }

            &.current a,
            &.current a:hover {
                background-color: #fff;
                color: #2B333F;
            }

            a:hover {
                background-color: rgba(115, 133, 159, 0.5)
            }
        }



    }
}